<template>
  <div class="sub-list">
    <h1>全部分类</h1>
    <ul>
      <li v-for="i in list" :key="i.id">
        <a href="javascript:;">
          <img
            :src="i.picture"
          />
          <p>{{i.name}}</p>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  props:['list'],
  data() {
    return {};
  },
  methods: {
 
  },
  mounted() {

  },
  watch:{

  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/color.scss";
.sub-list {
  margin-top: 20px;
  background-color: #fff;
  ul {
    display: flex;
    padding: 0 32px;
    flex-wrap: wrap;
    li {
      width: 168px;
      height: 160px;
      a {
        text-align: center;
        display: block;
        font-size: 16px;
        img {
          width: 100px;
          height: 100px;
        }
        p {
          line-height: 40px;
        }
        &:hover {
          color: $xtxColor;
        }
      }
    }
  }
}
h1 {
  text-align: center;
}
</style>
